*{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
  }
  html{
    height: 100%;
  }
  body{
    height: 100%;
    overflow: hidden;
    font: 100%/1.25 Helvetica, Arial;
    color: #ffffff;
    perspective: 1000px;
    background-color: #444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#999));
    background-image: -webkit-linear-gradient(top, #444, #999);
    background-image: linear-gradient(top bottom, #444, #999);
  }
  .book{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -150px;
    user-select: none;
    transform: rotateX(60deg);
  }
  .page{
    width: 300px;
    height: 300px;
    padding: 1em;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 2em;
  }
  .front{
    background-color: #d93e2b;
  }
  .back{
    background-color: #fff;
  }
  .front-cover{
    cursor: move;
    transform-origin: 0 50%;
    transform: rotateY(0deg);
  }
  .front-cover .back{
    background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553581220215&di=91943b3c087faf6b86e0670ce7c0eb3d&imgtype=0&src=http%3A%2F%2Fimg.25pp.com%2Fuploadfile%2Fsoft%2Fimages%2F2015%2F0301%2F20150301021016689.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform: translateZ(3px);
  }
  .back-cover .back{
    transform: translateZ(-3px);
  }
  .p3d{
    transform-style: preserve-3d;
  }
  .flip{
    transform: rotateY(180deg);
  }
  .dino,.shadow{
    width: 196px;
    height: 132px;
    position: absolute;
    left: 60px;
    top: 60px;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
  .dino{
    background: url(http://pic13.nipic.com/20110409/7119492_114440620000_2.jpg) no-repeat;
    background-size: cover;
  } 
  .shadow{
    background-color: rgba(0,0,0,0.5);
  }